<template>
	<view class="collection">
		<view class="w-center">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption">
				<block v-for="(item,index) in list" :key="index">
					<view class="oil-item df df-justify-content-between" @click="$navigateTo('/pages_order/pages/order/confirm-order/confirm-order?params='+encodeURIComponent(JSON.stringify(item))+'&type=station')">
						<image :src="IMG_URL+item.image" mode="aspectFill"></image>
						<view class="oil-item-data">
							<view class="oil-title">{{item.station_name}}</view>
							<view class="address-box df df-justify-content-between df-align-items">
								<text class="address" v-if="item.address">{{item.address}}</text>
								<text class="address" v-else>{{item.adresintro}}</text>
								<view class="distance-box" @click.stop="toMap(item)">
									<text class="address-icon iconfont icon-shouhuodizhi"></text>
									<text class="distance">{{item.distance}}</text>
								</view>
							</view>
							<view class="price-box df df-justify-content-between df-align-items">
								<!-- <view class="price-box-main df df-flex-direction-column ">
									<text class="price">￥{{item.p_price}}</text>
									<text class="o-price">油站价格￥{{item.price}}</text>
								</view> -->
								<view class="price-box-main df df-justify-content-between df-align-items">
									<view class="price df df-flex-direction-column df-justify-content">
										<text>平台价</text>
										<text>￥{{item.p_price}}</text>
									</view>
									<!-- <view class="line"></view> -->
									<view class="o-price df df-flex-direction-column df-justify-content">
										<text>油站价</text>
										<text>￥{{item.price}}</text>
									</view>
								</view>
								<view class="collection" @click.stop="cancelCollect(item.station_id)">取消收藏</view>
							</view>
						</view>
					</view>
				</block>
			<mescroll-empty v-if="list.length==0"></mescroll-empty>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import OilItem from '@/components/oil-item/oil-item.vue';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import api from '@/api/mine.js'
	export default{
		mixins: [MescrollMixin],
		components:{
			OilItem
		},
		data(){
			return{
				list: [],
				downOption: {
					use: true,
				},
				upOption: {
					use: true,
					auto: true,
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10, // 每页数据的数量
						time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
					},
					empty: {
						use: true, // 是否显示空布局
						icon: "https://www.mescroll.com/img/mescroll-empty.png", // 图标路径
						tip: '~ 暂无相关数据 ~', // 提示
						btnText: '去逛逛 >', // 按钮
						fixed: false, // 是否使用fixed定位,默认false; 配置fixed为true,以下的top和zIndex才生效 (transform会使fixed失效,最终会降级为absolute)
						top: "100rpx", // fixed定位的top值 (完整的单位值,如 "10%"; "100rpx")
						zIndex: 99 // fixed定位z-index值
					}
				},
				IMG_URL: ''
			}
		},
		onLoad() {
			this.IMG_URL = this.$IMG_URL;
			
			// #ifdef MP-ALIPAY
			// 支付宝小程序关闭页面下拉(默认开启下拉)
			my.setCanPullDown({ canPullDown:false });
			// #endif
		},
		methods:{
			//取消收藏
			cancelCollect(id,index){
				api.cancelCollect({
					id
				}).then(res=>{
					if(res.code == 1){
						uni.showToast({
							title: '取消收藏',
							icon: 'none',
							duration: 1000
						})
						this.list.splice(index,1)
					}
				})
			},
			getCollectList(){
				api.getCollectList()
			},
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				//联网加载数据
				const {
					longitude,
					latitude
				} = uni.getStorageSync('address');
				api.getCollectList({
					lng: longitude,
					lat: latitude
				}).then(curPageData => {
					let list_data =  curPageData.data.data.map(item=>{
						return {
							address: item.address,
							adresintro: item.adresintro,
							distance: item.distance,
							id: item.station_id,
							image: item.image,
							lat: item.lat,
							lng: item.lng,
							oil_type_id: item.oil_type_id,
							oil_id:item.oil_id,
							p_price: item.p_price,
							price: item.price,
							station_id: item.id,
							station_name: item.station_name,
							user_id: item.user_id
						}
					})
					this.mescroll.endBySize(list_data, curPageData.data.total)
					//设置列表数据
					if (page.num == 1) this.list = [];
					this.list = this.list.concat(list_data);
			
				}).catch(() => {
					this.mescroll.endErr();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.collection{
		.oil-item{
			width: 100%;
			min-height: 194rpx;
			margin-top: 44rpx;
			image{
				width: 160rpx;
				height: 160rpx;
				border-radius: 20rpx;
			}
			.oil-item-data{
				width: 73%;
				.oil-title{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #222222;
					padding-bottom: 12rpx;
				}
				.address-box{
					.address{
						width: 70%;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #8F96AC;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
					.distance-box{
						height: 44rpx;
						background: #F4F4F4;
						border-radius: 40rpx;
						padding: 0 14rpx;
						text-align: center;
						line-height: 44rpx;
						.distance{
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #50ACF8;
							padding-left: 4rpx;
						}
						.address-icon{
							color: #50ACF8;
						}
					}
				}
				.price-box{
					// padding-top: 26rpx;
					.price-box-main{
						width: 45%;;
						.price{
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #F12F63;
						}
						.o-price{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000;
							font-weight: bold;
						}
					}
					.collection{
						height: 50rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #F12F63;
						background: #FFFFFF;
						border: 1px solid #F12F63;
						border-radius: 100px;
						padding: 0 24rpx;
						line-height: 50rpx;
					}
				}
			}
		}
	}
</style>
